Improve dark mode support for download table#81
Conversation
✅ Deploy Preview for positron-posit-co ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Do you think it's clear enough that the table is disabled (until you click the button) now? Is it confusing what folks should do? I may have gotten overly used to the grayed-out version. 🙈 |
The table does look disabled to me but I could try and make it more prominent by adding back the overlay color if we think it's too subtle. I do think this experience is confusing but I feel like its causes by us trying to "disable" a table which is a non-interactive element. |
|
@dhruvisompura - I think that part of the issue is that we are using a callout for something that it isn't really intended for. So, I kind of skim right by it especially since in the past we've used "check boxes" as more of a "task management" system for people to "check off" where they are in the install or dependencies steps. I think that the styling looks a lot better but I wonder if introducing a new element that isn't a callout box would be more intuitive that this is a license agreement opt in. I think that the checkbox would be fine if we had a more "common" looking license agreement box. Not the best example, but Apple's license agreement is very "in your face" and recognizable vs. us repurposing a callout. Having the user navigate to the "license agreement" page also seems awkward. 
|
|
I can't remember if I had tried this before when adding the checkbox but it might be more obvious if the checkbox and agreement are overlaid on the table. Checking the box can make the entire overlay disappear to reveal/allow interaction with the table. |
|
@AshleyHenry15 I completely agree with you about the callout with a checkbox also being easy to skip right past. I do think the overall experience could be better.
@timtmok I don't think I remember seeing an overlay attempt in the PR that added the checkbox. This solution is pretty similar to the show/hide option we did try and we moved away from that experience. I know we are trying to be GDPR compliant with the download page but I wonder if we really need the additional checkbox? I have used other desktop apps that provide a statement like: I want to suggest the above option because it would be nice if we could make the download process frictionless with the fewest clicks possible and is the cheapest option to support/maintain if this is GDPR compliant. I'm hoping to keep the changes cheap and minimal in this PR and just get us unblocked! |
|
Alrighty, just chatted with @juliasilge and sounds like we do want an opt-in checkbox to precede the ability to download Positron. It sounds like we are in agreement that the UX of this page could be better. I am only trying to address the dark mode issue on the downloads page for now. I'm noticing that dark mode isn't very well supported on our site generally. Here's what the search looks like in dark mode: Some of the headings with code styling look odd as well (ex: the positron-workspaces-and-settings.json header) 
@AshleyHenry15 I'm thinking the simplest and fastest option for now would be to disable dark mode. This would resolve the issue on the downloads page. We can revisit the general UX and dark mode implementation in other issues. Does that sound alright to you? |
|
@dhruvisompura yeah - dark mode wasn't officially supported when we put the theme together. I am working on redoing it and the general design now that Quarto 1.7 is out and has much better dark theme support. Feel free to disable - we can circle back once I get back around to updating the theme. |
|
@dhruvisompura - just in case you want to take a look at some of the elements that we are playing around with: https://ashley.quarto.pub/theme-refresh/ very much a WIP |
@AshleyHenry15 I'd love to take a look at this! Is there a good avenue for leaving feedback on this WIP? |
https://github.com/AshleyHenry15/theme-refresh < it is public - feel free to open issues or whatever. The background color and some of the other elements are not set in stone - Greg S and I have been messing around with colors and what not in our "spare time". Posit blue is not super friendly for dark themes, unfortunately. So, we end up having to adjust it quite a bit. I stumbled upon https://tailwindcss.com/docs/installation/using-vite docs and I like their background color so I was going to give that a try and test Posit blue options again that. |
|
@dhruvisompura - this is the repo for the current theme extension as well (if you want to open issues for what is currently deployed): https://github.com/posit-dev/product-doc-theme/ |
We are ignoring the dark theme for now because it doesn't have great support. The work to create an official dark theme is tracked in the following issue: posit-dev/product-doc-theme#99. We can uncomment the line below once the dark theme is officially supported.
4 participants
Addresses posit-dev/positron#7918
We have some custom styling that makes the downloads table look disabled, however the colors used weren't compatible with dark mode and made the contents of the table illegible. I've updated the styling to rely on the body background color instead so the contents in the table are legible regardless of color theme.
Screen.Recording.2025-06-02.at.5.21.33.PM.mov